<% content_for :head do %>
    <%= stylesheet_link_tag "fancybox/jquery.fancybox" %>
    <%= javascript_include_tag "fancybox/jquery.fancybox" %>
    <!-- load slider -->
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $(".fancybox").fancybox({
                openEffect	: 'none',
                closeEffect	: 'none'
            });
        });
    </script>
<% end %>

<h3><%= t 'cartasur.admin.visiteds.view' %></h3>

<div class="intro-cartasur">
  <p><%= t 'cartasur.admin.visiteds.summarydesc' %></p>
  <p><b><%= (t 'cartasur.admin.reporting.user') << ": " %></b>
  <span class="track-list-text"> <%= @user.login %></span>
  <br />
  <% if @visited.try(:track).try(:protocol) %>
      <b><%= t 'cartasur.users.show.protocol' %>: </b>
      <span class="track-list-text"><%= friendly_objective_text @visited.track.protocol.objective.id %></span>
  <% end %>
    </p>
</div>

<br />


<div class="rounded_corners_div">
  <% if @visited.try(:track) %>
  <table class="visited_summary_details_table">
    <tr>
      <td>
        <b><%=  t 'cartasur.users.show.starttime' %>: </b> <font style="font-size: 11px;" color="#777777"><%= @visited.track.starts_at %></font><br/>
        <b><%= t 'cartasur.users.show.endtime' %>: </b> <span class="track-list-text"><%= @visited.track.ends_at %> (<%=distance_of_time_in_words(@visited.track.ends_at, Time.now) unless @visited.track.ends_at.nil? %> ago)</span> <br />


        <!-- tags -->
              <b><%=  t 'cartasur.users.show.frequenttags' %>: </b>
              <div id="track-<%= @visited.track.id %>" class="track-tags">
                <a href="#" id="link-<%= @visited.track.id %>"><%= t 'cartasur.users.show.clicktoload' %>..</a>

                <script type="text/javascript">
                    $(function(){
                        //get the parents element id
                        $('#link-<%= @visited.track.id %>').on('click', function(e) {
                            //get the parent id
                            var div = $(this).parent("div");
                            var div_id = div.attr("id");
                            //show loader
                            var loader =new ajaxLoader(this, {});
                            $.get("/cartasur/answers/ajaxcartasurtrackhtml?track="+div_id, function(data) {
                                loader.remove();
                                if (data && data !== "[]" && data !== "")
                                    div.html(data);
                                else
                                    div.html("(No tags)");
                            });

                            e.preventDefault();
                            return false;
                        });
                    });
                </script>
              </div>

      </td>

      <td>
      <img src="/cartasur/users/<%= @user.id%>/tracks/<%= @visited.track.id  %>.png?size=230x100"/>

      </td>

    </tr>
  </table>
  <% end %>
</div>

<br />

<h3><%= t 'cartasur.admin.visiteds.maptitle' %></h3>
<!-- map div -->
<div class="rounded_corners_div" style="padding-left: 20px" >
  <% if @visited.try(:track) %>
      <% if @visited.track.geolocated and not @visited.track.geom.nil? #nil check just to be sure
           center=@visited.track.geom.envelope.centroid
      %>
          <img src="http://maps.google.com/staticmap?key=ABQIAAAAEDqSJ7sjOq1o3M9HFMUctBTP6FiD4Pq0_NOM64wEPpZs4eDxtRS5-gQAVDwr5RxsOtxOMbZGzM-pjQ&sensor=true&center=<%=center.lat%>,<%=center.lng%>&zoom=13&size=300x300" /><br/>
          <a href="/cartasur/users/<%= @user.id %>/tracks/<%= @visited.track.id %>.kml">
            <img src="/images/icons/GoogleEarth_16x16.png" style="vertical-align: middle; padding-top: 5px;" alt="KML"/>&nbsp;<font size="2px" style="color:#999999">Download</font>
          </a><br/>
          <% if File.exists?("#{Rails.root}/cartasur/public/tours/tour#{@visited.track.id}.kml") %>
              <a href="cartasur/tours/tour<%= @visited.track.id  %>.kml"><img src="/images/icons/KML_16x16.png" align="absmiddle" alt="KML"/>&nbsp;<font size="2px" style="color:#999999"><%= t 'cartasur.users.show.animatedmaps' %></font></a>
          <% end
             end %>

  <% end %>
</div>

<br />
<!-- slideshow div -->
<h3><%= t 'cartasur.admin.visiteds.imagesforprotocol' %></h3>
<div class="rounded_corners_div" style="background: #f9f9f9; border-width: 1px;">
  <div class="flexslider">
    <fieldset id="objective-users" style="border-style: none;">
      <% unless @vimages.blank? %>
          <ul class="slides">
          <% @vimages.each{ |image| %>
            <li>
              <a class="fancybox" rel="gallery1" href="<%= image.image_url.to_s %>"> <%= image_tag image.image_url.thumb.to_s unless image.image_url.nil? %> </a>
            </li>
        <% } %>
           </ul>
      <% else %>
        <p><%= t 'cartasur.admin.visiteds.noimagesforprotocol' %></p>
      <% end %>
     </fieldset>
  </div>

</div>

<br />

<h3><%= t 'cartasur.admin.visiteds.surveyquestions' %></h3>

<div class="rounded_corners_div" style="background: #f9f9f9; border-width: 1px;">
  <% unless @questions.blank? %>
  <% @questions.each{ |question| %>
      <p><span class="cartasur_question_span"><%= question.text %> </span> <br />
      ﻿<% ans = @answers.where("question_id=#{question.id}").first
         unless ans.nil?
         item = ans.friendly_question_answer_text
         #loop through all sub-answers
         item[:subqns].each do |subqn| %>
            <% if subqn[:qn].nil? %>
                <span class="cartasur_answer_span"><%= subqn[:value] %></span> <br />
            <% else %>
                <span class="cartasur_answer_span"><%= subqn[:qn].name %></span>:
                <span class="cartasur_answer_span"><%= subqn[:value] %></span> <br />
            <% end %>
         <% end %>

         <% end #unless %>
      </p>
  <% }  %>
  <% end %>
</div>